<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
  <title>第27届清华大学结赛抽奖</title>
  <style>
    body{
      margin:0;
      padding:0;
    }
    canvas {
      background:#56bc8a;
      display:block;
      width:calc(100%);
      height:calc(100vh);
    }
  </style>
  <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
</head>
<body>
  <!-- 粒子特效容器 -->
  <canvas id="myShape"></canvas>
  <!-- 粒子特效文件 -->
  <script src="shape-shifter.js"></script>
  <!-- 逻辑 -->
  <script>
    let shapeShifter = S;
    let idxMin = 1, idxMax = 249; // 抽奖号码最小、最大值

    let isRunning = false;
    var intervalID = 0;           // 循环运行状态及运行指针
    const audio = new Audio("bgm.mp3");

    function getQueryVariable(variable) {
      let query = window.location.search.substring(1);
      let vars = query.split("&");
      for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if (pair[0] == variable) {return pair[1];}
      }
      return (false);
    }

    window.onload = function() {
      let c = getQueryVariable("c");
      if (c === "1") {
        shapeShifter.init(document.getElementById('myShape'), '结赛|一等奖||');
      } else if (c === "2") {
        shapeShifter.init(document.getElementById('myShape'), '结赛|二等奖||');
      } else if (c === "3") {
        shapeShifter.init(document.getElementById('myShape'), '结赛|三等奖||');
      } else {
        shapeShifter.init(document.getElementById('myShape'), '结赛|抽奖||');
      }
    }
    
    document.onkeydown = function(event) {
      var event = event || window.event;
      switch(event.keyCode) {
        case 13:
        case 32:
          isRunning = !isRunning;
          if (isRunning) {
            if (intervalID === 0) {
              shapeShifter.Shape.switchShape(
                shapeShifter.ShapeBuilder.letter(
                  Math.floor(Math.random() * (idxMax - idxMin + 1) + idxMin).toString()
              ))
              intervalID = setInterval(
                function() { 
                  shapeShifter.Shape.switchShape(
                    shapeShifter.ShapeBuilder.letter(
                      Math.floor(Math.random() * (idxMax - idxMin + 1) + idxMin).toString()
                  ))
                }, 250
              );
            }
            audio.play();
          } else {
            clearInterval(intervalID);
            intervalID = 0;
            shapeShifter.Shape.clearDots();
            shapeShifter.Shape.switchShape(
              shapeShifter.ShapeBuilder.letter(
                  Math.floor(Math.random() * (idxMax - idxMin + 1) + idxMin).toString()
            ));
            setTimeout("audio.pause();", 1000);
            setTimeout("audio.currentTime = 0;", 1100);
          }
          break;
      }
    }

    document.onclick = function(e) {
      isRunning = !isRunning;
      if (isRunning) {
        if (intervalID === 0) {
          shapeShifter.Shape.switchShape(
            shapeShifter.ShapeBuilder.letter(
              Math.floor(Math.random() * (idxMax - idxMin + 1) + idxMin).toString()
          ))
          intervalID = setInterval(
            function() { 
              shapeShifter.Shape.switchShape(
                shapeShifter.ShapeBuilder.letter(
                  Math.floor(Math.random() * (idxMax - idxMin + 1) + idxMin).toString()
              ))
            }, 250
          );
        }
        audio.play();
      } else {
        clearInterval(intervalID);
        intervalID = 0;
        shapeShifter.Shape.clearDots();
        shapeShifter.Shape.switchShape(
          shapeShifter.ShapeBuilder.letter(
              Math.floor(Math.random() * (idxMax - idxMin + 1) + idxMin).toString()
        ));
        setTimeout("audio.pause();", 1000);
        setTimeout("audio.currentTime = 0;", 1100);
      }
    }
  </script>
</body>
</html>